@mixin menuHorizontal 
  list-style-type: none
  margin-left: 4em
  display: inline
  li
    display: inline

@mixin makeColumnoMargin($columns:1, $offset: 0) 
  float: left
  margin-left: 0px
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1))

@mixin centered
  margin-left: auto
  margin-right: auto

@mixin ellipsis
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  display: inline-block
  width: 97%




@mixin contact-style
  .avatar
    img
      @include border-radius(5px)
  .data
    .name
      color: $black
      .x
        font-size: 12px
        color: $black
        a
          text-decoration: none
    .info
      font-size: 11px
      color: #777
      font-family: $sansFontFamilyLight
  .add
    @include btn-add

@mixin contact-layout
  margin: 4px 0 19px 14px
  width: 240px
  min-height: 76px
  float: left
  .avatar
    width: 45px !important
    float: left
  .data
    display: inline-block
    margin: 2px 0 3px 3px
    float: left
    width: 65%
    .info
      z-index: 1
    a
      display: inline
  .x
    a
      float: right
      display: inline-block
      margin-right: 16px
      margin-top: -98px
  .info
    z-index: 1
  .add
    margin-top: 2px
    width: auto

@mixin privacity
  width: 80%
  float: left
  margin-left: 2.5%   
  .relation_list
    @include makeColumn(3, 0)
    padding-right: 5px
    border-right: 1px solid #c4c4c4 
    input
      margin-right: 10px
    label
      display: inline-block

    .actions
      display: inline-block
      float: right
      margin-right: 10px

    .edit_name
      margin-top: -22px
      .edit_relation_custom
        margin-bottom: 0px
        #relation_custom_name
          width: 69% !important
          margin-left: 23px
          margin-top: -3px
        .icon_tool16-ok
          margin-top: -3px

    .btn
      margin-left: 32px
